<template>
<view class="container bgf5 min_h_100">
  <!-- 自定义标题栏 -->
  <navigationBar title="我的优惠券" extClass="nav" id="top"></navigationBar>
  <!-- 顶部选项卡 -->
  <view class="swiper-tab box-align-center dis-flex flex-y-center flex-x-between">
    <view :class="'swiper-tab-item ' + ( dataType === 'not_use' ? 'on' : '')" data-current="not_use" @tap="swichNav"><text>未使用</text></view>
    <view :class="'swiper-tab-item ' + ( dataType === 'is_use' ? 'on' : '')" data-current="is_use" @tap="swichNav"><text>已使用</text></view>
    <view :class="'swiper-tab-item ' + ( dataType === 'is_expire' ? 'on' : '')" data-current="is_expire" @tap="swichNav"><text>已过期</text></view>
  </view>
  <view class="tab-height"></view>

  <scroll-view scroll-y="true" :style="'height: ' + swiperHeight + 'px;'">
    <view class="coupon-list" v-if="list.length">
			<view class="coupon-item bgf radius16" v-for="(item, index) in list" :key="index">
				<!-- 店铺信息 -->
				<view class="wxapp-wrap dis-flex flex-y-center flex-x-between m-b-30">
					<view class="wxapp-logo"><image :src="item.logo" mode="aspectFill"></image></view>
					<view class="wxapp-name onelist-hidden flex-box m-l-20 m-r-30 f-30">{{item.name}}</view>
					<view class="f-24 t-c wxapp-btn" v-if="item.wxapp_id!=wxapp_id" @tap.stop="toHome(item.wxapp_id)">
						进店看看
					</view>
				</view>
			  <view class="item-wrapper col-9 dis-flex flex-y-center m-b-20 common-shadow" v-for="(item2,k) in item.coupons" :key="k" :class="!item2.state.value&&!item2.is_receive?'gray-item':''">
			    <view class="tip dis-flex flex-dir-column flex-x-center col-f">
			      <view v-if="item2.coupon_type.value == 10">
			        <text class="f-30">￥</text>
			        <text class="money">{{ item2.reduce_price }}</text>
			      </view>
			      <text class="money" v-if="item2.coupon_type.value == 20">{{ item2.discount }}折</text>
			      <text class="pay-line">满{{ item2.min_price }}元可用</text>
			    </view>
					<view class="middle flex-box oh p-l-30 p-r-30">
						<view class="coupon-type col-3 f-28">{{ item2.coupon_type.text }}</view>
						<view class="time flex-box f-24 m-t-20 break-all">
							<text v-if="item2.expire_type == 10">*领取{{ item2.expire_day }}天内有效</text>
							<text v-if="item2.expire_type == 20">{{ item2.start_time.text }}~{{ item2.end_time.text }}</text>
						</view>
					</view>
					<view class="bottom">
						<view class="state f-28 t-c">
							{{ dataType=='not_use'? '已领取': dataType=='is_use'? '已使用': dataType=='is_expire'? '已过期':''}}
						</view>
					</view>
			  </view>
			</view>
    </view>
		<tui-no-data v-else-if="notcont" imgUrl="https://pic.kaidanxia.com/2020-08-21/20200821154706b82751596.png" :imgWidth="264" :imgHeight="264">
			<view class="col-9">亲，暂无优惠券哦</view>
		</tui-no-data>
  </scroll-view>
</view>
</template>

<script>
const app = getApp().globalData;

export default {
	components: {
	},
  data() {
    return {
      // 选项卡标示
      dataType: 'not_use',
      // 列表高度
      swiperHeight: 0,
      // 优惠券列表
      list: [],
      // show
      notcont: false,
			wxapp_id:'',
    };
  },

  components: {
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad (options) { 
		this.wxapp_id = app.wxapp_id||'';
    // 获取优惠券列表
    this.getCouponList();
		this.$nextTick(() => {
			// 设置高度
			this.setSwiperHeight();
		})
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow () {
  },
  methods: {
    /**
     * 获取优惠券列表
     */
    getCouponList () {
      let _this = this;

      app._get('user.coupon/lists', {
        data_type: _this.dataType
      }, res => {
        _this.setData({
          list: res.data.list,
          notcont: !res.data.list.length
        });
      });
    },

    /**
     * 设置swiper的高度
     */
    setSwiperHeight () {
      // 获取系统信息(拿到屏幕宽度)
      const query = wx.createSelectorQuery();
      query.select('#top').boundingClientRect();
      query.selectViewport().scrollOffset();
      query.exec(res => {
        let systemInfo = wx.getSystemInfoSync(),
            rpx = systemInfo.windowWidth / 750,
            // 计算rpx
        tapHeight = Math.floor(rpx * 80),
            // tap高度
        swiperHeight = systemInfo.windowHeight - tapHeight - res[0].height; // swiper高度

        console.log(systemInfo.windowHeight,tapHeight,res[0].height);
        this.setData({
          swiperHeight: swiperHeight
        });
      });
    },

    /** 
     * 点击tab切换 
     */
    swichNav (e) {
      let _this = this;

      _this.setData({
        list: {},
        dataType: e.currentTarget.dataset.current
      }, function () {
        // 获取优惠券列表
        _this.getCouponList();
      });
    },
		// 进店看看
		toHome(wid){
			if (wid) {
			  app.wxapp_id = wid;
			  wx.setStorageSync("wxapp_id", wid);
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
  }
};
</script>
<style lang="scss">
	@import "coupon";
	@import '@/pages/coupon/_templete/templete1/index';
</style>